<script setup>
import {onMounted, ref, watch} from "vue"
import {ElMessage} from "element-plus";

const useComputerHistoryData = ref([])
const allComputerListData = ref([])

onMounted(()=> {
  // findAllComputerList()
  findUseHistory()
})

import {searchUseComputerHistory,getComputerList,searchUseComputerHistoryByTimeToTime} from "@/api/computer.js"
import {Search} from "@element-plus/icons-vue";
//查询上机历史
const findUseHistory = async ()=>{
  let result = await searchUseComputerHistory();
  useComputerHistoryData.value = result.date;
}
findUseHistory()


//获取所有电脑信息
/*const findAllComputerList = async ()=> {
  let result = await getComputerList();
  allComputerListData.value = result.date
  //给useComputerHistoryData添加computerName属性，并对应computer的id进行赋值
  for (let i = 0; i < useComputerHistoryData.value.length; i++) {
    for (let j = 0; j < allComputerListData.value.length; j++) {
      if (useComputerHistoryData.value[i].computerId == allComputerListData.value[j].id) {
        useComputerHistoryData.value[i].computerName = allComputerListData.value[j].detail
      }
    }
  }
  console.log(useComputerHistoryData.value)
}
findAllComputerList()*/
//时间选择 查询上机历史
const timeValue = ref('')
const isNotTime = ref(false)

watch(timeValue, async (newValue, oldValue) => {

  if (newValue == null) {
    //如果清空时间数据后 则再次查询所有信息
    findUseHistory()
  }

  const formatOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
    // weekday: 'short'
  };
  const formatter = new Intl.DateTimeFormat('zh-CN', formatOptions);

  //先转换为2024/5/24 15:00:00的格式
  const formattedDates = newValue.map(date => formatter.format(date));
  //将2024/5/24改为2024-5-24的格式
  const formatDates = formattedDates.map(dateTime => {
    const [date, time] = dateTime.split(' ')
    const formatDate = date.replace(/\//g, '-')
    return `${formatDate} ${time}`
  });
  console.log('Formatted dates:', formatDates);

  let result = await searchUseComputerHistoryByTimeToTime(formatDates[0], formatDates[1])
  console.log(result.date)
  if (result.date.length == 0) {
      isNotTime.value = true
      ElMessage.info("该时间段没有消费过电脑")
  }else {
      ElMessage.success("查询成功")
  }
  useComputerHistoryData.value = result.date;

})
</script>

<template>
  <div class="historyContainer">

    <el-affix target=".historyContainer" :offset="80">
      <div class="block">
        <el-tooltip
            class="box-item"
            effect="dark"
            content="请选择一个时间范围"
            placement="bottom"
        >
          <el-button><el-icon><Search/></el-icon>根据时间查询</el-button>
        </el-tooltip>
<!--        <span>根据时间查询<el-icon><Search/></el-icon></span>-->
        <el-date-picker
            v-model="timeValue"
            type="datetimerange"
            start-placeholder="时间1"
            end-placeholder="时间2"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
        />
      </div>
    </el-affix>


    <el-timeline style="max-width: 600px">
      <el-timeline-item :timestamp=history.starttime placement="top"
                        type="primary" size="large"
                        v-for="(history,index) in useComputerHistoryData">
        <el-card>
          <h4>历史机型：{{history.computerName}}</h4>
          <p class="historyCardP">
            <el-text class="mx-1" type="primary">开始时间：{{history.starttime}} </el-text>
            <el-text class="mx-1" type="success"> 花费：{{history.cost}}元 </el-text>
            <br/>
            <el-text class="mx-1" type="primary">结束时间：{{history.endtime}} </el-text>
            <el-text class="mx-1"> 使用时间：{{history.duration}}h</el-text>
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <el-empty description="该时间段没有使用电脑" v-if="isNotTime" image-size="200px"/>
  </div>
</template>

<style scoped>
.historyContainer {
  width: 100%;
  height: 580px;
  overflow: auto;
  padding: 10px;
  box-sizing: border-box;
}
.historyContainer .historyCardP {

}
.el-timeline {
  padding-top: 50px;
}
.myselfBlock {
  position: fixed;
  margin-top: 10px;
  top: 80px;
  z-index: 100;
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}

</style>
